<template>
	<view class="container">
		<view class="header-bg">
			<image class="backImage" src="/static/arrow-left.png" mode="" @click="backPage"></image>
			<view class="user-info">
				<!-- Avatar Image -->
				<view class="left-column">
					<image class="avatar" :src="$xyfun.image(storeInfo.logo)"></image>
					<view class="info">
						<text class="nickname">{{ storeInfo.name }}</text>
						<text class="id">ID: {{ storeInfo.id }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 我的订单 -->
		<view class="xy-order m-30 p-30 br-20 bc-w">
			<view class="stats">
				<!-- 第一行，单个元素居左 -->
				<view class="stat-item full-width">今日收入 <text class="highlight">{{ todayRevenue }}</text></view>
				<!-- 第二行，三个均匀分布 -->
				<view class="stat-row">
					<view class="stat-item">累计营收 <text class="highlight">{{ totalRevenue }}</text></view>
					<view class="stat-item">今日预约人数 <text class="highlight">{{ todayReservations }}</text></view>
					<view class="stat-item">在线房间 <text class="highlight">{{ onlineRooms }}</text></view>
				</view>
			</view>
		</view>

		<!-- 功能服务 -->
		<view class="xy-order-first m-30 p-30 br-20 bc-w">
			<view class="xy-title flex">
				<view class="tb">我的订单</view>
			</view>
			<view class="order-section">
				<view v-for="(order, index) in orders" :key="index" @click="navigateTo(order.route)" class="order-item">
					<image :src="$xyfun.image(order.icon)" class="order-icon"></image>
					<text class="order-name">{{ order.name }}</text>
				</view>
			</view>
		</view>

		<!-- 功能服务 -->
		<view class="xy-service m-30 p-30 br-20 bc-w">
			<view class="xy-title flex">
				<view class="tb">功能服务</view>
			</view>
			<view class="xy-menu tc m-t-40 col-4">
				<view class="list flex">
					<view v-for="(service, index) in services" :key="index" @click="navigateTo(service.route)"
						class="item m-b-40">
						<image :src="$xyfun.image(service.icon)" class="service-icon"></image>
						<view class="name m-t-15 lh-30 ts-30">{{ service.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-height"></view>
		<xy-tabbar />
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	export default {
		components: {
			xyTabbar,
		},
		data() {
			return {
				css: {},
				storeInfo: {},
				todayRevenue: '0.00', // 今日收入
				totalRevenue: '0.00', // 累计营收
				todayReservations: 0, // 今日预约人数
				onlineRooms: 0, // 在线房间
				orders: [{
						name: '全部订单',
						icon: '/static/order-1.png',
						route: '/pages/user/order/list'
					},
					{
						name: '使用中订单',
						icon: '/static/order-2.png',
						route: '/pages/user/order/list?pageOrderId=3'
					},
					{
						name: '超时订单',
						icon: '/static/order-3.png',
						route: '/pages/user/order/list?pageOrderId=4'
					}
				],
				services: [{
						name: '充值管理',
						icon: '/static/server-1.png',
						route: '/pages/service/recharge'
					},
					{
						name: '卡券管理',
						icon: '/static/server-2.png',
						route: '/pages/service/coupon'
					},
					{
						name: '会员列表',
						icon: '/static/server-7.png',
						route: '/pages/service/userList'
					},
					{
						name: '房间管理',
						icon: '/static/server-8.png',
						route: 'pages/service/roomList'
					},
					{
						name: '设备控制',
						icon: '/static/server-9.png',
						route: '/pages/store/equipment'
					},
					{
						name: '提现管理',
						icon: '/static/server-11.png',
						route: '/pages/store/payouts'
					},
					{
						name: '营收记录',
						icon: '/static/server-12.png',
						route: '/pages/store/revenue'
					},
					{
						name: '店铺设置',
						icon: '/static/server-6.png',
						route: '/pages/service/storeSetting'
					}
				]
			};
		},
		computed: {
			...mapState(['common', 'user'])
		},
		onLoad() {
			this.$xyfun.setNavBg()
			this.css = this.$xyfun.css();
		},
		onShow() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.loadData()
		},
		methods: {
			...mapActions('user', {
				'getUserInfo': 'getInfo'
			}),
			loadData() {
				this.$xyfun.userStoreId().then((store_id) => {
					this.$api.get({
						url: '/store/detail',
						loadingTip: '加载中...',
						data: {
							id: store_id
						},
						success: res => {
							uni.stopPullDownRefresh();
							this.storeInfo = res;
							this.loadStats(); // 查询门店的统计数据
							this.loadOnlineRoom(); // 查询在线房间
						}
					});

					// 刷新用户信息
					if (this.user.isLogin) {
						this.getUserInfo();
					}
				})
			},
			// 查询门店的今日收入、累计营收等数据
			loadStats() {
				this.$xyfun.storeId().then((store_id) => {
					const today = new Date();
					const startOfDay = new Date(today.setHours(0, 0, 0, 0)).getTime() / 1000; // 今天开始的时间戳
					const endOfDay = new Date(today.setHours(23, 59, 59, 999)).getTime() / 1000; // 今天结束的时间戳
					// console.log("store_id:"+store_id)
					this.$api.get({
						url: '/order/getStats',
						loadingTip: '加载统计数据...',
						data: {
							store_id: store_id,
							start_time: startOfDay,
							end_time: endOfDay
						},
						success: res => {
							this.todayRevenue = res.todayRevenue || '0.00';
							this.totalRevenue = res.totalRevenue || '0.00';
							this.todayReservations = res.todayReservations || 0;
						}

					});
				});
			},
			// 查询在线房间数据
			loadOnlineRoom() {
				this.$xyfun.storeId().then((store_id) => {
					this.$api.get({
						url: '/Venue/getOnlineRoom',
						loadingTip: '加载统计数据...',
						data: {
							store_id: store_id,
						},
						success: res => {
							this.onlineRooms = res.onlineRooms || 0;
						}

					});
				});
			},
			// Navigation function to handle page transition
			navigateTo(route) {
				uni.navigateTo({
					url: route // Dynamic route passed from the data
				});
			},
			// 返回上一级页面
			backPage() {
				uni.navigateBack(-1)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		// padding: 20rpx;
		background-color: #f5f5f5;

	}

	.bottom-height {
		height: 100px;
	}

	.background-image {
		position: absolute;
		/* 定位到最底层 */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保图片覆盖整个区域 */
		z-index: -1;
		/* 保证图片不会遮挡内容 */
	}

	.stats {
		display: flex;
		flex-direction: column;
		gap: 10px;
		/* 每行之间的间距 */
		// background-image: url('/static/store/background.png');
		background-size: cover;
		background-position: center;
		width: 100%;
		/* 确保容器宽度 */
		height: 218rpx;
		/* 明确高度 */
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
	}

	.highlight {
		font-weight: bold;
		color: #fff;
	}

	/* 第一行元素占满宽度，内容靠左 */
	.full-width {
		justify-content: flex-start;
		width: 33%;
	}

	/* 第二行，三个元素均匀分布 */
	.stat-row {
		display: flex;
		justify-content: space-between;
		/* 元素均匀分布 */
		width: 100%;
	}

	.stat-item {
		flex: 1;
		/* 每个元素等宽 */
		text-align: center;
		/* 内容居中 */
	}

	.stat-item:first-child {
		text-align: left;
		/* 第一列靠左对齐 */
	}

	.xy-title {
		font-size: 32rpx;
		font-weight: bold;
		height: 60rpx;
		line-height: 60rpx;
	}

	.user-info {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		position: relative;
		/* To position the background image */
		padding: 20rpx;
		border-radius: 10rpx;
		padding-top: 108rpx;
	}

	.header-bg {
		height: 417rpx;
		background-image: linear-gradient(to right, #fff1eb 0%, #ace0f9 100%);
		padding-top: 90rpx;
	}

	.xy-order {
		  position: absolute;
		  top: 280rpx;
		  width: 630rpx;
		  margin-top: 90rpx;
		  background-image: url('https://wq.hoeagri.com/static/logoimage.png'); /* 添加背景图片 */
		  background-size: cover; /* 背景图片覆盖整个区域 */
		  background-position: center; /* 背景图片居中显示 */
		  background-repeat: no-repeat; /* 防止图片重复 */
		}

	.xy-order-first {
		margin-top: 200rpx;
	}


	.xy-service {
		margin-top: 20rpx;
	}

	.bg-image {
		position: absolute;
		/* Make the image a background */
		top: 0;
		left: 0;
		width: 750rpx;
		/* Cover the entire space */
		height: 517rpx;
		/* Cover the entire space */
		object-fit: cover;
		/* Ensure the image covers the section */
		z-index: -1;
		/* Place it behind the content */
		border-radius: 10rpx;
		/* Match the border radius */
	}

	.left-column {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.right-column {
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar {
		width: 135rpx;
		height: 135rpx;
		border-radius: 50%;
		margin-right: 5px;
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-bottom: 10rpx;
		height: 100rpx;
		// line-height: 100rpx;
	}

	.nickname {
		font-size: 36rpx;
		font-weight: bold;
	}

	.id {
		font-size: 28rpx;
		color: #fff;
		// width: 154rpx;
		height: 45rpx;
		background: #F8B551;
		border-radius: 10rpx;
		text-align: center;
		margin-top: 10rpx;
	}

	.venue-left {
		/* background-color: #fff; */
		/* padding: 10rpx; */
		// border-radius: 10rpx;
		/* margin-top: 10rpx; */
	}

	.venue-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.switch-wrapper {
		display: flex;
		align-items: center;

		image {
			margin-left: 5rpx;
			width: 12rpx;
			height: 23rpx;
		}
	}

	.label {
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	.switch-text {
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	.arrow-icon {
		width: 12rpx;
		height: 23rpx;
	}

	.venue-name {
		width: 218rpx;
		height: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		line-height: 100rpx;
	}




	/* 我的订单样式 */
	.order-section {
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 28rpx;
		/* padding: 20rpx; */

		.order-name {
			color: #2B1F1F;
			font-size: 28rpx;
		}
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33%;
		/* padding: 10rpx; */
		/* border-bottom: 1px solid #eee; */
	}

	.order-item:last-child {
		border-bottom: none;
	}

	.order-item image {
		width: 63rpx;
		height: 63rpx;
		margin-bottom: 26rpx;
	}

	.order-item text {
		font-size: 28rpx;
		color: #333;
	}



	/* 确保每行显示 4 个 */
	.order-section {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.order-item {
		flex-basis: 33%;
	}

	.xy-menu {
		width: 600rpx;

		.item {
			width: 33.3%;
			text-align: center;

			button {
				background: none;
				padding: 0;
				margin: 0;
			}

			button::after {
				border: none;
			}
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.xy-menu.col-4 {
		.item {
			width: 25%;
			// margin-top:40rpx;

			image {
				width: 63rpx;
				height: 63rpx;
			}

			.name {
				margin-top: 40rpx;
			}
		}
	}

	.backImage {
		filter: invert(100%);
		top: 44px;
		position: fixed;
		left: 16rpx;
		z-index: 100;
		width: 54rpx;
		height: 54rpx;
	}
</style>